<template>
  <div>
    <el-card class="box-card" shadow="always">
      <div slot="header" class="clearfix">
        <b>
          <svg-icon icon-class="menu" />
          代理列表</b>
      </div>
      <!-- 搜索表单 -->
      <el-form ref="queryForm" :inline="true" :model="queryParams" size="mini">
        <el-form-item />
        <el-form-item>
          <el-input
            v-model="queryParams.name"
            clearable
            placeholder="代理名称"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="handleQuery"
            v-has-permission="['member:member:listTree']"
          >搜索
          </el-button>
          <el-button
            icon="el-icon-refresh"
            @click="handleReset"
          >重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="pageList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        highlight-current-row
        row-key="id"
        size="mini"
        @row-click="handleRowClick"
      >
        <el-table-column label="代理名称">
          <template slot-scope="scope">
            <template v-if="scope.row.icon !== undefined && scope.row.icon.includes('el-icon')">
              <i :class="scope.row.icon" />
            </template>
            <template v-else>
              <svg-icon :icon-class="scope.row.icon ? scope.row.icon : 'build'" />
            </template>
            {{ scope.row.nickname }} {{ scope.row.mobile }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pagination.total > 0"
        :limit.sync="pagination.limit"
        :page.sync="pagination.page"
        :total="pagination.total"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import { listMemberTree } from '@/api/ums/member'

export default {
  name: 'MemberTree',
  components: { },
  data() {
    return {
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      queryParams: {
        name: undefined,
        queryMode: undefined
      },
      pageList: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      dialog: {
        title: undefined,
        visible: false
      },
      form: { },
      rules: { },
      currentRow: undefined
    }
  },
  async created() {
    this.handleQuery()
  },
  methods: {
    checkPermission,
    handleQuery() {
      this.queryParams.levelId = '5'
      this.queryParams.pageNum = this.pagination.page
      this.queryParams.pageSize = this.pagination.limit
      listMemberTree(this.queryParams).then(({ data }) => {
        this.pageList = data.list
        this.pagination.total = data.totalCount
        this.loading = false
      })
    },
    handleReset() {
      this.pagination = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.queryParams.name = undefined
      this.handleQuery()
    },
    handleRowClick(row) {
      const currentRow = JSON.parse(JSON.stringify(row))
      // console.log('选中代理', currentRow)
      this.currentRow = currentRow
      this.form = currentRow
      this.$emit('memberRowClick', row)
    }
  }
}
</script>

<style scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: left;
}
</style>
